  <!-- 交易中的订单 -->
  <template>
  <div class="main-body">
    <header class="main-body-search">
      <el-form :model="search" @submit.native.prevent>
        <el-row :gutter="50" type="flex" justify="space-between">
          <el-col :span="12">
            <!-- <el-button type="primary" @click="showDetail({})" icon="el-icon-plus">我要订单</el-button> -->
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-form-item label class="nja-form-line">
              <el-input
                style="width: 350px;"
                v-model.trim="search.keyword"
                placeholder="订单编号、买家手机号"
                clearable
                @keyup.enter.native="searchHandle"
              >
                <div
                  slot="prefix"
                  style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;"
                >
                  <i class="el-icon-search"></i>
                </div>
                <el-button type="primary" slot="append" @click="searchHandle">查询</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </header>
    <el-main class="main-body-table">
      <div class="table-shadow"></div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="calc(100vh - 250px)"
      >
        <el-table-column type="index" label="#" width="60px" align="center"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间" align="center" min-width="150"></el-table-column>
        <el-table-column prop="orderType" label="订单类型" align="center" min-width="80"></el-table-column>
        <el-table-column prop="customerId" label="买家" align="center" min-width="150"></el-table-column>
      
        <el-table-column
          prop="orderPhone"
          label="订单电话"
          show-overflow-tooltip
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="orderAddress"
          label="订单地址"
          show-overflow-tooltip
          align="left"
          min-width="180"
        ></el-table-column>
        <el-table-column prop="totalAmount" label="金额" align="center" min-width="100"></el-table-column>
        <el-table-column prop="orderPickUpTime" label="订单取货时间" align="center" min-width="140"></el-table-column>
        <el-table-column prop="status" label="状态" align="center" min-width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status != '已完成' ? 'warning' : 'info'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="170px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              v-if="scope.row.orderType == '外送' && scope.row.status != '已发货'"
              @click="finishOrder(scope.row, '已发货')"
            >发货</el-button>
            <el-button
              size="mini"
              type="primary"
              v-else
              @click="finishOrder(scope.row, '已完成')"
            >完成订单</el-button>
            <el-button size="mini" type="primary" @click="showDetail(scope.row)" plain>查看</el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </el-table>
      <!--工具条-->
      <el-pagination
        background
        class="main-body-table-page"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :current-page="search.current"
        :page-size="search.size"
        :total="search.total"
      ></el-pagination>
    </el-main>
    <el-dialog
      title="查看订单"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      center
      v-dialogDrag
      custom-class="mydialog"
      width="900px"
    >
      <el-form
        ref="form"
        class="formlayout"
        :model="form"
        label-width="120px"
        label-position="right"
      >
        <el-descriptions title :column="2">
          <el-descriptions-item label="订单类型">
            <el-tag>{{ form.orderType }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="订单时间">{{ form.orderTime }}</el-descriptions-item>
          <el-descriptions-item
            label="订单取货时间"
            v-if="form.orderPickUpTime"
          >{{ form.orderPickUpTime }}</el-descriptions-item>
          <el-descriptions-item label="定点取货点" v-if="form.addressPoint">{{ form.addressPoint }}</el-descriptions-item>
          <el-descriptions-item label="订单人">{{ form.orderPerson }}</el-descriptions-item>
          <el-descriptions-item label="订单人电话">{{ form.orderPhone }}</el-descriptions-item>
          <el-descriptions-item label="配送费用" v-if="form.deliveryFee">
            ￥
            <span class="price">{{ form.deliveryFee }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="订单总金额">
            ￥
            <span class="price">{{ form.totalAmount }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title :column="2">
          <el-descriptions-item label="订单地址" :span="2">{{ form.orderAddress }}</el-descriptions-item>
          <el-descriptions-item label="订单备注" :span="2">{{ form.remarks }}</el-descriptions-item>
        </el-descriptions>
        <el-table
          :data="form.orderItems"
          stripe
          height="300px"
          header-row-class-name="liststyle2"
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column prop="productName" label="商品">
            <template slot-scope="scope">
              <el-image class="list-img" v-if="scope.row.image" :src="scope.row.image">
                <div slot="error" class="image-slot">暂无</div>
              </el-image>
              <el-image v-else class="list-img">
                <div slot="error" class="image-slot">暂无</div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品"></el-table-column>
          <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
          <el-table-column prop="unitPrice" label="单价" align="center"></el-table-column>
          <el-table-column prop="totalPrice" label="总价" align="center"></el-table-column>
        </el-table>
        <div v-if="form && form.orderItems">总共{{form.orderItems.length}}种商品，共{{totalNum}}件</div>
      </el-form>
    </el-dialog>
  </div>
</template>
    
    <script>
import {
  SelectPage,
  SelectList,
  DeleteHandle,
  UpdateHandle
} from '@/api/shop/order'
export default {
  data() {
    return {
      visible: false,
      dialogVisible: false,
      search: {
        current: 1,
        size: 20,
        total: 0,
        keyword: ''
      },
      form: {
        id: '',
        name: '',
        longitude: '',
        latitude: ''
      },
      multipleSelection: [],
      tableData: []
    }
  },
  computed: {
    totalNum() {
      if (this.form && this.form.orderItems) {
        return this.form.orderItems.reduce((a, b) => {
          a += b.quantity
          return a
        }, 0)
      }
      return 0
    }
  },
  methods: {
    changeMap([lng, lat, address]) {
      this.form.longitude = lng
      this.form.latitude = lat
      this.form.address = address
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    finishOrder(row, type) {
      // 完成订单
      let msg = `确定${type == '已完成' ? '完成订单' : '订单发货'}吗？`
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        UpdateHandle({ orderId: row.orderId, status: type }).then((res) => {
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.loadData()
          }
        })
      })
    },
    showDetail(row) {
      this.form = Object.assign(
        {
          orderItems: []
        },
        row
      )
      this.dialogVisible = true
      this.loadOrderItems()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    loadOrderItems() {
      SelectList({
        orderId: this.form.orderId
      }).then((res) => {
        this.form.orderItems = res.data.map((d) => {
          d.image = `${this.$store.getters.baseApi}/open-api/product/img?refId=${d.productId}`
          return d
        })
      })
    },
    saveHandle() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 保存
          let params = Object.assign({}, this.form)
          delete params.lastUpdateTime
          delete params.createTime
          params.status = '已处理'
          UpdateHandle(params).then(async (res) => {
            console.log('RegisterRequest', res)
            if (res.code === 20000) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.dialogVisible = false
              this.loadData()
            }
          })
        }
      })
    },
    deleteRow(row) {
      console.log(row)
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteHandle({ id: row.id }).then((res) => {
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.loadData()
          }
        })
      })
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.loadData()
    },
    searchHandle() {
      this.search.current = 1
      this.loadData()
    },
    loadData() {
      let params = Object.assign({}, this.search)
      SelectPage(params)
        .then((res) => {
          console.log('success:', res)
          this.tableData = res.data.records
          this.search.total = res.data.total
        })
        .catch((err) => {
          console.log('err:', err)
        })
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>
    
    <style lang="scss" scoped>
.tableimg {
  width: 45px;
}
.formlayout {
  padding: 20px 40px;
}

$imgwidth: 100px;

.face-img {
  position: relative;
  height: $imgwidth;
  width: $imgwidth;
  background-color: #f1f2f3;
  // border: 1px solid #eee;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hiddle {
    visibility: hidden;
  }
  .avatar-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    height: $imgwidth;
    width: $imgwidth;
    &:hover {
      .avatar-uploader-icon {
        background-color: rgba(200, 200, 200, 0.5);
      }
      .hiddle {
        visibility: visible;
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    font-size: 28px;
    color: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 30px;
    }
  }

  .avatar {
    height: $imgwidth;
    width: $imgwidth;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.list-img {
  height: 50px;
  width: 50px;
  line-height: 50px;
  border: 1px solid #f1f2f3;
}
.price {
  font-size: 20px;
  font-weight: 700;
}
</style>
    